<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>即时搜索下拉列表示例v0.1</title>
    <link rel="stylesheet" href="../stylesheets/common.css" />
    <link rel="stylesheet" href="../stylesheets/table.css" />
    <link rel="stylesheet" href="../ext/zw/lui-v2.1/css/extension.css" />

</head>

<body>
    <div class="place">
        <span class="label-span">位置：</span>
        <ul id="place-list" class="place-ul">
            <li>
                首页
            </li>
        </ul>
    </div>
    <div class="body-warp">
        <div class="panel">
            <div class="panel-body">
                <form class="field-container">
                    <span class="headline">即时搜索下拉列表示例v0.1</span>
                    <table class="form-table">
                        <tr style="position:relative;z-index:2001">
                            <td>
                                <label class="form-label" for="search1">#0101<b class="red">*</b></label>
                            </td>
                            <td>
                                <input id="searchFilter0101" class="form-control" type="text" autocomplete="off" />
                                <div id="droplist0101" class="ext-droplist hide">
                                </div>
                            </td>
                            <td><span class="form-tip alert alert-info">禁用[enabled=false]</span></td>
                        </tr>

                        <tr style="position:relative;z-index:2000">
                            <td>
                                <label class="form-label" for="search1">#0102<b class="red">*</b></label>
                            </td>
                            <td>
                                <input id="searchFilter0102" class="form-control" type="text" autocomplete="off" />
                                <div id="droplist0102" class="ext-droplist hide">
                                </div>
                            </td>
                            <td>
                                <span class="form-tip alert alert-info">单选[selectedMultiple=false]</span></td>
                        </tr>
                        <tr style="position:relative;z-index:1999">
                            <td>
                                <label class="form-label" for="search1">#0103<b class="red">*</b></label>
                            </td>
                            <td>
                                <input id="searchFilter0103" class="form-control" type="text" autocomplete="off" />
                                <div id="droplist0103" class="ext-droplist hide">
                                </div>
                            </td>
                            <td><span class="form-tip alert alert-info">多选[selectedMultiple=true]</span></td>
                        </tr>
                        <tr style="position:relative;z-index:1998">
                            <td>
                                <label class="form-label" for="search1">#0104<b class="red">*</b></label>
                            </td>
                            <td>
                                <div>
                                    <input id="searchFilter0104" class="form-control" type="text" autocomplete="off" value="占位的人,刘备" />
                                    <div id="droplist0104" class="ext-droplist hide">
                                    </div>
                                </div>
                            </td>
                            <td><span class="form-tip alert alert-info">已存在默认值+多选[selectedMultiple=true]</span></td>
                        </tr>
                        <tr style="position:relative;z-index:1997">
                            <td>
                                <label class="form-label" for="search1">#0105<b class="red">*</b></label>
                            </td>
                            <td>
                                <div>
                                    <input id="searchFilter0105" class="form-control" type="text" autocomplete="off" value="占位的人,,,刘备" />
                                    <div id="droplist0105" class="ext-droplist hide">
                                    </div>
                                </div>
                            </td>
                            <td><span class="form-tip alert alert-info">已存在默认值(容错，自动去除多余分割符)+单选+异步加载数据</span></td>
                        </tr>
                        <tr style="position:relative;z-index:1996">
                            <td>
                                <label class="form-label" for="search1">#0106<b class="red">*</b></label>
                            </td>
                            <td>
                                <div>
                                    <input id="searchFilter0106" class="form-control" type="text" autocomplete="off" value="" />
                                    <div id="droplist0106" class="ext-droplist hide">
                                    </div>
                                </div>
                            </td>
                            <td><span class="form-tip alert alert-info">多选+更改分割符号为,中文逗号"，"[splitSymbol="，"]+关闭选择框时触发一个关闭事件回调[closeTrigger=callback]</span></td>
                        </tr>
                        <tr style="position:relative;z-index:1995">
                            <td>
                                <label class="form-label" for="search1">#0107<b class="red">*</b></label>
                            </td>
                            <td>
                                <div>
                                    <input id="searchFilter0107" class="form-control" type="text" autocomplete="off" value="" />
                                    <div id="droplist0107" class="ext-droplist hide">
                                        <div class="ext-content clearfix clear" data-role="content">
                                            <div class="ext-node-container" data-role="node-container" style="display: block;">
                                                <div class="ext-node ext-node-0 selected" data-role="node"><span class="name" title="刘备">刘备</span></div>
                                            </div>
                                            <div class="ext-node-container" data-role="node-container">
                                                <div class="ext-node ext-node-0" data-role="node"><span class="name" title="曹操">曹操</span></div>
                                            </div>
                                            <div class="ext-node-container" data-role="node-container">
                                                <div class="ext-node ext-node-0 selected" data-role="node"><span class="name" title="孙权">孙权</span></div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
            </div>
            </td>
            <td><span class="form-tip alert alert-info">静态加载+更改无内容时提示字符串为“别忘了选择我喔”（默认显示"--请选择--"）[placeholder="别忘了选择我喔"]</span></td>
            </tr>
            <tr style="position:relative;z-index:1994">
                <td>
                    <label class="form-label" for="search1">#0108<b class="red">*</b></label>
                </td>
                <td>
                    <div>
                        <input id="searchFilter0108" class="form-control" type="text" autocomplete="off" value="" />
                        <div id="droplist0108" class="ext-droplist hide">

                        </div>
                    </div>
        </div>
        </td>
        <td><span class="form-tip alert alert-info">查找绑定在节点上的所有字段数据[filterKey="all"]，（未指定查所有时，默认只查节点text()内容），输入“lxd”，查找刘备（刘玄德）
</span></td>
        </tr>
        <tr style="position:relative;z-index:1993">
            <td>
                <label class="form-label" for="search1">#0109<b class="red">*</b></label>
            </td>
            <td>
                <div>
                    <input id="searchFilter0109" class="form-control" type="text" autocomplete="off" value="" />
                    <div id="droplist0109" class="ext-droplist hide">

                    </div>
                </div>
    </div>
    </td>
    <td><span class="form-tip alert alert-info">模拟中文和拼音简写查询[filterKey="['name','value','zh']"]，同时开启模糊查询[mtachMode=true]，输入“sm”，查找孙仲谋，顺带检索出司马仲达</span></td>
    </tr>
    <tr style="position:relative;z-index:1992">
        <td>
            <label class="form-label" for="search1">#0110<b class="red">*</b></label>
        </td>
        <td>
            <div>
                <input id="searchFilter0110" class="form-control" type="text" autocomplete="off" value="" />
                <div id="droplist0110" class="ext-droplist hide">

                </div>
            </div>
            </div>
        </td>
        <td><span class="form-tip alert alert-info">指定为数字类型搜索[filterType=1]，默认查找所有类型内容，即不作限制</span></td>
    </tr>
    <tr style="position:relative;z-index:1991">
        <td>
            <label class="form-label" for="search1">#0111<b class="red">*</b></label>
        </td>
        <td>
            <div>
                <input id="searchFilter0111" class="form-control" type="text" autocomplete="off" value="" />
                <div id="droplist0111" class="ext-droplist hide">

                </div>
            </div>
            </div>
        </td>
        <td><span class="form-tip alert alert-info">指定为英文类型搜索[filterType=2]</span></td>
    </tr>

    <tr style="position:relative;z-index:1990">
        <td>
            <label class="form-label" for="search1">#0112<b class="red">*</b></label>
        </td>
        <td>
            <div>
                <input id="searchFilter0112" class="form-control" type="text" autocomplete="off" value="" />
                <div id="droplist0112" class="ext-droplist hide">

                </div>
            </div>
            </div>
        </td>
        <td><span class="form-tip alert alert-info">指定为中文类型搜索[filterType=3]</span></td>
    </tr>
    <tr style="position:relative;z-index:1989">
        <td>
            <label class="form-label" for="search1">#0113<b class="red">*</b></label>
        </td>
        <td>
            <div>
                <input id="searchFilter0113" class="form-control" type="text" autocomplete="off" value="" />
                <div id="droplist0113" class="ext-droplist hide">

                </div>
            </div>
            </div>
        </td>
        <td><span class="form-tip alert alert-info">指定为数字+英文类型搜索[filterType=12]</span></td>
    </tr>
    <tr style="position:relative;z-index:1988">
        <td>
            <label class="form-label" for="search1">#0114<b class="red">*</b></label>
        </td>
        <td>
            <div>
                <input id="searchFilter0114" class="form-control" type="text" autocomplete="off" value="" />
                <div id="droplist0114" class="ext-droplist hide">

                </div>
            </div>
            </div>
        </td>
        <td><span class="form-tip alert alert-info">指定为数字+中文类型搜索[filterType=13]</span></td>
    </tr>
    <tr style="position:relative;z-index:1987">
        <td>
            <label class="form-label" for="search1">#0115<b class="red">*</b></label>
        </td>
        <td>
            <div>
                <input id="searchFilter0115" class="form-control" type="text" autocomplete="off" value="" />
                <div id="droplist0115" class="ext-droplist hide">

                </div>
            </div>
            </div>
        </td>
        <td><span class="form-tip alert alert-info">指定为英文+中文类型搜索[filterType=23]</span></td>
    </tr>
    <tr style="position:relative;z-index:1986">
        <td>
            <label class="form-label" for="search1">#0116<b class="red">*</b></label>
        </td>
        <td>
            <div>
                <input id="searchFilter0116" class="form-control" type="text" autocomplete="off" value="" />
                <div id="droplist0116" class="ext-droplist hide">

                </div>
            </div>
            </div>
        </td>
        <td><span class="form-tip alert alert-info">数字+英文+中文类型搜索[filterType=123]（除他们之外如符号不搜索）</span></td>
    </tr>
    <tr style="position:relative;z-index:1985">
        <td>
            <label class="form-label" for="search1">#0117<b class="red">*</b></label>
        </td>
        <td>
            <div>
                <input id="searchFilter0117" class="form-control" type="text" autocomplete="off" value="" />
                <div id="droplist0117" class="ext-droplist hide">

                </div>
            </div>
            </div>
        </td>
        <td><span class="form-tip alert alert-info">设置延迟1000毫秒搜索[filterTimeout=1000]（默认无延迟，如果当数据量大于默认100条时，自动设置延迟250毫秒搜索）</span></td>
    </tr>
    <tr style="position:relative;z-index:1984">
        <td>
            <label class="form-label" for="search1">#0118<b class="red">*</b></label>
        </td>
        <td>
            <div>
                <input id="searchFilter0118" class="form-control" type="text" autocomplete="off" value="" />
                <div id="droplist0118" class="ext-droplist hide">

                </div>
            </div>
            </div>
        </td>
        <td><span class="form-tip alert alert-info">设置触发延迟搜索的默认数据量[filterLength=5]，默认100条
</span></td>
    </tr>
    </table>
    </form>
    </div>
    </div>
    </div>
    <script type="text/javascript" src="../ext/jquery/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../ext/zw/lui-v2.1/js/common.js"></script>
    <script type="text/javascript" src="../ext/zw/lui-v2.1/js/luicontroller-advance.js"></script>
    <script type="text/javascript" src="../ext/zw/lui-v2.1/js/panelview.js"></script>
    <script type="text/javascript" src="../ext/zw/lui-v2.1/js/droplist.js"></script>
    <script type="text/javascript" src="../ext/zw/lui-v2.1/js/extension.js"></script>
    <script>
        $(function () {
            var setting = {
                store: {
                    data: [
                        {
                            name: "刘备",
                            value: "lb",
                            zh: 'lxd',
                            checked: true,
                            phone: 15868707979

						},
                        {
                            name: "曹操",
                            value: "cc",
                            zh: "cmd",
                            selected: true,
                            phone: 15861547979
				},
                        {
                            name: "孙权",
                            zh: "szm",
                            value: "sq",
                            phone: 15166870797

				}, {
                            name: "司马懿",
                            zh: "smzd",
                            value: "smy",
                            phone: 15732807979
				}, {
                            name: "关羽",
                            zh: "gyz",
                            selected: true,
                            value: "gy",
                            phone: 15868707891
				}, {
                            name: "张飞",
                            zh: "zyd",

                            value: "zf",
                            phone: 15868706629
				}, {
                            name: "赵云",
                            zh: "zzl",
                            value: "zy",
                            phone: 15898707979
				}, {
                            name: "马超",
                            zh: "mmq",
                            value: "mc",
                            phone: 15867890279
				}, {
                            name: "黄忠",
                            zh: "hhs",
                            value: "hz",
                            phone: 15867907979
				},

		]
                },
                view: {}
            }


            //#01 纯下拉列表示例
            var setting0101 = $.extend(true, {}, setting);
            var setting0102 = $.extend(true, {}, setting);
            var setting0103 = $.extend(true, {}, setting);
            var setting0104 = $.extend(true, {}, setting);
            var setting0105 = $.extend(true, {}, setting);
            var setting0106 = $.extend(true, {}, setting);
            var setting0107 = $.extend(true, {}, setting);
            var setting0108 = $.extend(true, {}, setting);
            var setting0109 = $.extend(true, {}, setting);
            var setting0110 = $.extend(true, {}, setting);
            var setting0111 = $.extend(true, {}, setting);
            var setting0112 = $.extend(true, {}, setting);
            var setting0113 = $.extend(true, {}, setting);
            var setting0114 = $.extend(true, {}, setting);
            var setting0115 = $.extend(true, {}, setting);
            var setting0116 = $.extend(true, {}, setting);
            var setting0117 = $.extend(true, {}, setting);
            var setting0118 = $.extend(true, {}, setting);

            //#0101 禁用

            setting0101.view.enabled = false;

            drop0101 = $("#droplist0101").droplist(setting0101);

            EXT.SearchFilter({
                trigger: drop0101,
                viewer: "#searchFilter0101"
            });


            //#0102 单选

            setting0102.view.selectedMultiple = false;

            drop0102 = $("#droplist0102").droplist(setting0102);

            EXT.SearchFilter({
                trigger: drop0102,
                viewer: "#searchFilter0102"
            });

            //#0103 多选

            setting0103.view.selectedMultiple = true;

            drop0103 = $("#droplist0103").droplist(setting0103);

            EXT.SearchFilter({
                trigger: drop0103,
                viewer: "#searchFilter0103"
            });

            //#0104 已有默认值(多选)+异步加载


            setting0104.view.selectedMultiple = true;

            drop0104 = $("#droplist0104").droplist(setting0104);

            EXT.SearchFilter({
                trigger: drop0104,
                viewer: "#searchFilter0104"
            });


            //#0105 已有默认值(单选)

            setting0105.async = {};
            setting0105.async.enabled = true;
            setting0105.async.url = "data-10.json";

            drop0105 = $("#droplist0105").droplist(setting0105);

            EXT.SearchFilter({
                trigger: drop0105,
                viewer: "#searchFilter0105"
            })

            //#0107 多选+更改分割符号为,中文逗号"，"
            setting0106.view.selectedMultiple = true;
            setting0106.view.splitSymbol = "，";
            setting0106.callback = {}
            setting0106.callback.closeTrigger = function (self) {
                output(self.getSelectedData()[0])
            };
            drop0106 = $("#droplist0106").droplist(setting0106);

            EXT.SearchFilter({
                trigger: drop0106,
                viewer: "#searchFilter0106"
            });

            //#0107 静态加载+默认提示
            setting0107.store.data = [];
            setting0107.view.placeholder = "别忘了选择我喔";
            setting0107.view.selectedMultiple = true;
            setting0107.view.enabledCheckMode = true;
            drop0107 = $("#droplist0107").droplist(setting0107);

            EXT.SearchFilter({
                trigger: drop0107,
                viewer: "#searchFilter0107"
            });


            //#0108 查找绑定在节点上的所有字段数据，输入“lxd”，查找刘备（刘玄德）
            setting0108.view.filterKey = "all";
            drop0108 = $("#droplist0108").droplist(setting0108);

            EXT.SearchFilter({
                trigger: drop0108,
                viewer: "#searchFilter0108"
            });

            //#0109 模拟中文和拼音简写查询，同时开启模糊查询，输入“sm”，查找孙仲谋，顺带检索出司马仲达
            setting0109.view.filterKey = ["name", "value", "zh"];
            setting0109.view.matchMode = true;
            drop0109 = $("#droplist0109").droplist(setting0109);

            EXT.SearchFilter({
                trigger: drop0109,
                viewer: "#searchFilter0109"
            });


            //#0110 数字类型搜索
            setting0110.view.filterType = 1;
            setting0110.view.selectedMultiple = true;

            setting0110.view.nodeFormater = function (nodeData) {
                return nodeData.phone
            }
            drop0110 = $("#droplist0110").droplist(setting0110);

            EXT.SearchFilter({
                trigger: drop0110,
                viewer: "#searchFilter0110"
            });

            //#0111 英文类型过滤
            setting0111.view.filterType = 2;
            setting0111.view.selectedMultiple = true;

            setting0111.view.nodeFormater = function (nodeData) {
                return nodeData.value
            }
            drop0111 = $("#droplist0111").droplist(setting0111);

            EXT.SearchFilter({
                trigger: drop0111,
                viewer: "#searchFilter0111"
            });

            //#0112 中文类型过滤
            setting0112.view.filterType = 3;
            setting0112.view.selectedMultiple = true;


            drop0112 = $("#droplist0112").droplist(setting0112);

            EXT.SearchFilter({
                trigger: drop0112,
                viewer: "#searchFilter0112"
            });

            //#0113 数字+英文类型过滤
            setting0113.view.filterType = 12;
            setting0113.view.selectedMultiple = true;
            setting0113.view.nodeFormater = function (nodeData) {
                return nodeData.phone + nodeData.value
            }

            drop0113 = $("#droplist0113").droplist(setting0113);

            EXT.SearchFilter({
                trigger: drop0113,
                viewer: "#searchFilter0113"
            });


            //#0114 数字+中文类型过滤
            setting0114.view.filterType = 13;
            setting0114.view.selectedMultiple = true;
            setting0114.view.nodeFormater = function (nodeData) {
                return nodeData.name + nodeData.phone
            }

            drop0114 = $("#droplist0114").droplist(setting0114);

            EXT.SearchFilter({
                trigger: drop0114,
                viewer: "#searchFilter0114"
            });

            //#0115 英文+中文类型过滤
            setting0115.view.filterType = 23;
            setting0115.view.selectedMultiple = true;
            setting0115.view.nodeFormater = function (nodeData) {
                return nodeData.name + nodeData.value
            }
												setting0115.callback={}
												setting0115.callback.closeTrigger = function(trigger,viewer){
							//关闭弹出下拉列表回调事件 hidePopuper()老方法已准备废弃，目前兼容，请更换至新方法名
							output(viewer.data());//返回true表示内容变更，false表示无变更
						};

            drop0115 = $("#droplist0115").droplist(setting0115);

            EXT.SearchFilter({
                trigger: drop0115,
                viewer: "#searchFilter0115"
            });

            //#0116 数字+英文+中文类型过滤
            setting0116.view.filterType = 123;
            setting0116.view.nodeFormater = function (nodeData) {
                return nodeData.name + nodeData.value + nodeData.phone
            }

            drop0116 = $("#droplist0116").droplist(setting0116);

            EXT.SearchFilter({
                trigger: drop0116,
                viewer: "#searchFilter0116"
            });

            //#0117 设置延迟X毫秒搜索[filterTimeout=1000]（默认无延迟，如果当数据量大于默认100条时，自动设置延迟250毫秒搜索）
            setting0117.view.filterTimeout = 1000;

            drop0117 = $("#droplist0117").droplist(setting0117);

            EXT.SearchFilter({
                trigger: drop0117,
                viewer: "#searchFilter0117"
            });

            //#0118 设置触发延迟搜索的默认数据量[filterLength=5]，默认100条
            setting0118.view.filterLength = 5;
            setting0118.callback={};
            setting0118.callback.openTrigger = function(trigger,viewer){
							//新增：弹出下拉列表回调事件
							
						};
						setting0118.callback.closeTrigger = function(trigger,viewer){
							//关闭弹出下拉列表回调事件 hidePopuper()老方法已准备废弃，目前兼容，请更换至新方法名
							output(viewer.data());//返回true表示内容变更，false表示无变更
						};
            setting0118.view.filterLength = 5;
      
            drop0118 = $("#droplist0118").droplist(setting0118);
            drop0118 = $("#droplist0118").droplist(setting0118);

            EXT.SearchFilter({
                trigger: drop0118,
                viewer: "#searchFilter0118"
            });
            /* 初始化控件 */
            initWidget();

            /*侦听*/
            addListeners();


        });

        /*初始化控件*/
        function initWidget() {



        }


        function addListeners(argument) {

        }
    </script>
</body>

</html>